<template>
	<uni-popup ref="popup" type="bottom">
		<view class="content" v-if="data.item">
			<view class="hd">
				<icon class="iconfont icon" @click="close()">&#xe733;</icon>
			</view>
			<view class="bd">
				<view class="img">
					<lazy-load-image class="img" :image="data.item.img_big" :errorImg="config.errorImage.img" imgMode='aspectFill' height="436rpx" />
				</view>
				<view class="title">
					<text>{{data.item.title}}</text>
				</view>
				<view class="tags">
					<view class="item-tag" v-for="(item_tag,index_tag) in data.item.tag" :key="index_tag">
						<text>{{item_tag}}</text>
					</view>
				</view>
				<view class="desc">
					<text>{{data.item.introduce}}</text>
				</view>
			</view>
			<view class="ft">
				<view class="price">
					<view class="t">
						<text class="unit">¥</text>
						<text class="num">{{data.item.price}}</text>
					</view>
					<view class="b">
						<text>已帮助{{data.item.im_num}}人</text>
					</view>
				</view>
				<template v-if="showCheckState">
					<button type="default" class="btn btn-dis">
						<text>{{checkState(data.item.trial)}}</text>
					</button>
				</template>
				<template v-else>
					<button type="default" class="btn btn-im" hover-class="btnClickStyle" @click.stop="toIm(data.item.mid,data.item.nickname)">
						<icon class="iconfont icon">&#xe78f;</icon>
						<text>免费咨询</text>
					</button>
				</template>
			</view>
		</view>
	</uni-popup>
	<!-- 登录组件 -->
	<weixin-login ref="wxLogin" />
</template>
<script setup>
	import { ref, reactive, computed } from 'vue';
	import { useStore } from 'vuex';
	import useStatus from '@/common/hooks/useStatus.js';
	import { tongji } from '@/common/api/common/tongji.js';
	import config from '@/uni.config.js';
	const wxLogin = ref(null);
	const { navToCheckLogin, toIm } = useStatus(wxLogin);
	const store = useStore();
	const popup = ref(null);
	const data = reactive({
		item: null
	});
	const showCheckState = computed(() => {
		const result = data.item.mid == store.getters.userInfo.mid && typeof data.item.trial != 'undefined';
		return result;
	})

	function open(item) {
		data.item = item;
		popup.value.open();
		uni.$once('CLOSESERVICEPOPUP', () => {
			if (popup.value) popup.value.close();
		})
	}

	function close() {
		popup.value.close();
	}
	// 审核状态
	function checkState(v) {
		switch (+v) {
			case 0:
				return '审核中';
			case 1:
				return '审核通过';
			case 2:
				return '审核失败，请前往电脑端修改';
		}
	}
	defineExpose({
		open,
		close
	});
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.content {
		@include flex(column);
		align-items: flex-start;
		flex-wrap: nowrap;
		max-height: 85vh;
		border-radius: 16rpx 16rpx 0 0;
		background-color: #fff;
	}
	.hd {
		@include flex(row, flex-end);
		width: 100%;
		height: 100rpx;
		padding: 0 24rpx;
		.icon {
			font-size: 36rpx;
		}
	}
	.bd {
		flex: 1;
		width: 100%;
		padding: 0 34rpx;
		overflow-y: auto;
		.img {
			width: 436rpx;
			margin: 0 auto 20rpx;
		}
		.title {
			padding: 10rpx 0;
			word-break: break-all;
			font-weight: 700;
			font-size: 36rpx;
			color: #111;
		}
		.tags {
			@include flex(row, flex-start);
			flex-wrap: wrap;
			margin: 0 -10rpx;
			.item-tag {
				height: 48rpx;
				line-height: 48rpx;
				margin: 10rpx;
				padding: 0 20rpx;
				background: #F5F5F5;
				border-radius: 4rpx;
				font-style: normal;
				font-size: 24rpx;
				color: #888;
			}
		}
		.desc {
			line-height: 40rpx;
			padding: 10rpx 0;
			word-break: break-all;
			font-size: 26rpx;
			color: #333;
		}
	}
	.ft {
		@include flex;
		width: 100%;
		height: 100rpx;
		.price {
			@include flex(column, center, flex-start);
			width: 268rpx;
			height: 100%;
			padding: 0 34rpx;
			background: #F1F1F1;
			.unit {
				font-size: 24rpx;
				color: red;
			}
			.num {
				font-weight: 700;
				font-size: 36rpx;
				color: red;
			}
			.b {
				font-size: 24rpx;
				color: #888;
			}
		}
		.btn {
			@include flex(row, center);
			flex: 1;
			height: 100%;
			border-radius: 0;
			background: $color;
			font-size: 32rpx;
			color: #fff;
			&-dis {
				background-color: #ccc;
			}
			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>
